<template>
  <div class="conponent">
    <div class="login">
      <div class="title">
        <p>欢迎使用智慧养老系统</p>
      </div>
      <div class="input">
        <div class="name">
          <el-input v-model="name" style="width: 33vw" placeholder="姓名" />
        </div>
        <div class="act">
          <el-input v-model="phone" style="width: 33vw" placeholder="手机号" />
        </div>
        <div class="pwd">
          <el-input v-model="pwd" style="width: 33vw" type="password" placeholder="密码" show-password />
        </div>
        <div class="comfirmPwd">
          <el-input v-model="confirmPwd" style="width: 33vw" type="password" placeholder="再次确认密码" show-password />
        </div>
        <div class="userType">
          <el-select v-model="userType" placeholder="请选择身份" style="width: 33vw">
            <el-option label="管理员" value="admin" />
            <el-option label="员工" value="staff" />
          </el-select>
        </div>
        <div class="code">
          <el-input v-model="code" style="width: 20vw" placeholder="验证码" clearable />
          <el-button type="primary" style="width: 10vw;margin-left: 3vw;font-size: small;" @click="sendCode">{{ codeBtn
            }}</el-button>
        </div>
        <div class="regBtn">
          <el-button type="primary" @click="register">注册</el-button>
        </div>
        <div class="tip">
          <p>已有账号？<router-link to="/login">返回登录</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus';
import axio from '@/API/axios/axios'; // 导入封装好的 axios 实例
import { useRouter } from 'vue-router';
import type { User } from '@/API/interface/loginRegister';
import { sendCodeApi, registerApi } from '@/API/interface/loginRegister';

const router = useRouter();

const name = ref("");
const phone = ref("");
const pwd = ref("");
const confirmPwd = ref("");
const code = ref("");
const codeBtn = ref("获取验证码");
const userType = ref<'admin' | 'staff'>('staff'); // 添加用户身份选择
let countdown = 60;  // 验证码倒计时

// 发送验证码
const sendCode = async () => {
  if (countdown === 60) {
    try {
      const res = await sendCodeApi(phone.value)
      console.log('验证码', res.data.data.code);

      if (res.data.code == "200") {
        ElMessage.success('验证码已发送');
        ElMessage({
          message: '验证码：'+res.data.data.code,
          type: 'success',
        });
        startCountdown();
      } else {
        ElMessage.error('验证码发送失败');
      }
    } catch (error) {
      ElMessage.error('验证码发送失败，请重试');
    }
  }
};

// 等待验证码倒计时
const startCountdown = () => {
  let timer = setInterval(() => {
    countdown--;
    codeBtn.value = `${countdown}秒后重试`;
    if (countdown === 0) {
      clearInterval(timer);
      countdown = 60;
      codeBtn.value = "获取验证码";
    }
  }, 1000);
};

// 注册
const register = async () => {
  if (pwd.value !== confirmPwd.value) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }

  try {
    const userRegisterInfo: User = {
      realName: name.value,
      phone: phone.value,
      password: pwd.value,
      code: code.value,
      userType: userType.value, // 包含用户身份
      username: phone.value
    }
    console.log("注册信息", userRegisterInfo);

    const response = await registerApi(userRegisterInfo);
    console.log("注册返回", response.data);

    if (response.data.code == "200") {
      ElMessage.success('注册成功');
      router.push("/login");
    } else {
      ElMessage.error('注册失败，请重试');
    }
  } catch (error) {
    ElMessage.error('注册失败，请重试');
  }
};
</script>

<style lang="less" scoped>
.conponent {
  display: flex;
  /* 使用flex布局 */
  width: 100vw;
  height: 100vh;
  /* 设置父容器的高度 */
  background-image: linear-gradient(to right, #d26edd, #92b6f5);

  .login {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 20%;
    right: 30%;
    width: 40vw;
    height: 65vh;
    /* 调整高度以适应新增的组件 */
    background-color: #ffffff;
    border-radius: 1em;

    .title {
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vh;
        font-size: 20px;
        font-weight: bold;
        color: #2e8ae7;
        text-align: center;
      }
    }

    .input {
      display: flex;
      flex-direction: column;
      align-items: center;

      .act,
      .pwd,
      .comfirmPwd,
      .code,
      .userType {
        margin-top: 20px;
      }

      .regBtn {
        margin-top: 20px;
      }

      .tip {
        margin-top: 10px;
      }
    }
  }
}
</style>